<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box01,#box02{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            border: 5px solid black;

        }
        .box{
            left: -100px;
            top: -100px;
        }
        .change{
            animation: changePosition 1s linear forwards;
        }
        #box01{
            left: 0;
            top: 0;
            
        }
        @keyframes changePosition{
            0%{
                left: -100px;
                top: -100px;
            }
            40%{
                left: 0;
                top: 0;
            }
            50%{
                left: 100px;
                top: 100px;
            }
            60%{
                left: 80px;
                top: 80px;
            }
            75%{
                left: 90px;
                top: 90px;
            }
            100%{
                left: 85px;
                top: 85px;
            }
        }
    </style>
</head>
<body>
    <div id="box01">

    </div>
    <div id="box02" class="box">

    </div>
    <script>
        window.onload = function(){
            var box01 = document.getElementById("box01");
            var box02 = document.getElementById("box02");
            box01.onclick = function(){
                console.log("dianji");
                addClass(box02,"change");
                console.log(getStyle(box01,"border"));
                box01.style.borderLeftColor = "white";
            }


	/*
	 * 修改类名函数
	 */
     function addClass(obj,name){
		if(!hasClass(obj,name)){
			obj.className += " " + name;
		}
	}
	function hasClass(obj,name){
		var reg = new RegExp("\\b"+name+"\\b");
		return reg.test(obj.className);
	}
	function removeClass(obj,name){
		var reg = new RegExp("\\b"+name+"\\b");
		obj.className = obj.className.replace(reg , "");
    }
    function getStyle(obj,name){
        if(window.getComputedStyle){
            return getComputedStyle(obj,null)[name];
        }else{
            return obj.currentStyle[name];
        }
    }
	function toggleClass(obj , cn){
		
		//判断obj中是否含有cn
		if(hasClass(obj , cn)){
			//有，则删除
			removeClass(obj , cn);
		}else{
			//没有，则添加
			addClass(obj , cn);
		}
		
	}
        }

    </script>
</body>
</html>